<template>
  <div
    class="keyboard"
    :style="'margin-top:'+fillingNum+'rpx'"
  >
    <vbutton
      ref="dom_rotate"
      color="blue"
      size="s1"
      :top="-20"
      :left="354"
      :label="rotation"
      arrow="translate(0, 70rpx)"
      :position="true"
      :active="keyboard['rotate']"
      @touchstart="touchstart('rotate')"
      @touchend="touchend('rotate')"
    />
    <vbutton
      ref="dom_down"
      color="blue"
      size="s1"
      :top="200"
      :left="354"
      :label="labelDown"
      arrow="translate(0,-70rpx) rotate(180deg)"
      :active="keyboard['down']"
      @touchstart="touchstart('down')"
      @touchend="touchend('down')"
    />
    <vbutton
      ref="dom_left"
      color="blue"
      size="s1"
      :top="90"
      :left="244"
      :label="labelLeft"
      arrow="translate(60rpx, -12rpx) rotate(270deg)"
      :active="keyboard['left']"
      @touchstart="touchstart('left')"
      @touchend="touchend('left')"
    />
    <vbutton
      ref="dom_right"
      color="blue"
      size="s1"
      :top="90"
      :left="464"
      :label="labelRight"
      arrow="translate(-60rpx, -12rpx) rotate(90deg)"
      :active="keyboard['right']"
      @touchstart="touchstart('right')"
      @touchend="touchend('right')"
    />
    <vbutton
      ref="dom_space"
      color="blue"
      size="s0"
      :top="100"
      :left="52"
      :label="labelDropSpace"
      :active="keyboard['drop']"
      @touchstart="touchstart('space')"
      @touchend="touchend('space')"
    />
    <vbutton
      ref="dom_r"
      color="red"
      size="s2"
      :top="0"
      :left="196"
      :label="labelResetR"
      :active="keyboard['reset']"
      @touchstart="touchstart('r')"
      @touchend="touchend('r')"
    />
    <vbutton
      ref="dom_s"
      color="green"
      size="s2"
      :top="0"
      :left="106"
      :label="labelSoundS"
      :active="keyboard['music']"
      @touchstart="touchstart('s')"
      @touchend="touchend('s')"
    />
    <vbutton
      ref="dom_p"
      color="green"
      size="s2"
      :top="0"
      :left="16"
      :label="labelPauseP"
      :active="keyboard['pause']"
      @touchstart="touchstart('p')"
      @touchend="touchend('p')"
    />
  </div>
</template>
<style lang="less">
 @import './index.less';
</style>

<script src="./index.js">
</script>
